<template>
    <div>
        <!-- <van-nav-bar title="首页" /> -->
        <div class="h-screen flex justify-center">
            <div class="w-full flex flex-col" >
                <!-- 图片 -->
                <van-image width="100%" :src="giftBookInfo.banner" />
                <!-- 产品列表 -->
                <van-grid :gutter="10" :column-num="2" :border="false" style="margin-top: 1rem;padding-bottom: 2rem;">
                    <van-grid-item class="gift-item" v-for="item in giftBookInfo.productList" @click="goDetail(item)">
                        <van-image :src="item.thumb" fit="fill" />
                        <view class="prod-con">
                            <view class="van-multi-ellipsis--l2 prod-text" style="height: 3rem;">
                                {{ item.title }}
                            </view>
                            <view class="btn">去兑换</view>
                        </view>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>


        <van-overlay :show="isshow" z-index="999">
            <van-loading size="24px" vertical
                style="top: 50%;display: flex;align-items: center;justify-content: center;">登录中...</van-loading>
        </van-overlay>


        <van-back-top class="custom" @click="goUser" bottom="120" offset="0">
            <img src="@/assets/user.png" alt="Custom Icon" slot="default" />
        </van-back-top>

        <van-back-top class="custom">
            <img src="@/assets/top.png" alt="Custom Icon" slot="default" />
        </van-back-top>

    </div>
</template>

<script setup name="Gift">
import { Image as VanImage } from 'vant';
import { useRouter } from 'vue-router';
import { CommonApi } from '@/api/CommonApi';
import { ref, onMounted } from 'vue';


const $router = useRouter();

// isshow
const isshow = ref(false);

// 礼品册信息
const giftBookInfo = ref([]);

onMounted(() => {
    isshow.value = true;
    CommonApi.getGiftBookInfo()
        .then(response => {
            giftBookInfo.value = response.data;
        })
        .finally(() => {
            isshow.value = false;
        });
});

// goDetail
const goDetail = (item) => {
    console.log('goDetail');
    // $router.push('/detail');
    // 带参数 gift_prod_id
    $router.push({ path: '/detail', query: { giftProdId: item.giftProdId } });

};

// goUser
const goUser = () => {
    console.log('goUser');
    $router.push('/order');
};

</script>

<style lang="less">
body {
    background: #f5f5f5;
}

.gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    .van-grid-item__content {
        border-radius: 0.8rem 0.8rem 0rem 0rem;
        padding: 0rem 0rem 0.5rem 0rem;
        overflow: hidden;
    }

    view {
        // margin-top: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        // padding: 0.2rem 0.5rem;

    }

    .prod-con {
        padding: 0.5rem 0.1rem 0.5rem 0.8rem !important;
        // padding-right: 0.1rem !important;

        .prod-text {
            font-size: 0.85rem;
            color: #262626;
            line-height: 17rpx;
            text-align: left;
            font-weight: bold;
            text-transform: none;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
        }

        .btn {
            display: block;
            color: #E70101;
            height: 1.5rem;
            margin-top: 0.2rem;
        }
    }

    view.text {
        font-weight: bold;
        font-size: 0.8rem;
        color: #262626;
        line-height: 17rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }



    .van-grid-item__content {
        width: 100%;

        img {
            // 宽高一样
            width: 100%;
            height: 100%;
        }
    }

}

.custom {
    background: none !important;
    width: 15vw;
    height: 15vw;
    // 去掉投影
    box-shadow: none !important;
    border: 0px !important;

    img {
        width: 15vw;
        height: 15vw;
    }
}
</style>